<template>
  <div class="deta">
    <div class="back" @click="headerClick"><van-icon name="arrow-left" /></div>
    <div>
      <div class="ount" v-cloak>
        <img :src="list.img" alt="" />
      </div>
      <div class="top">
        <h4><van-icon name="comment-o" color="green" />{{ list.title }}</h4>
        <p class="browse1">{{ list.browse }}人浏览 | {{ list.pate }}人参与</p>
        <p>{{ list.content }}</p>
        <van-collapse v-model="activeNames" style="background: none">
          <van-collapse-item title="参与规则及征集时间" name="1">
            征集时间 2022.12.27-2023.01.12 18:00 参与规则
            评价作品要求:发笔记分享新冠期间你的独家饮食经验
          </van-collapse-item>
        </van-collapse>
      </div>
    </div>
    <van-tabs @click="onClick" background="none" title-active-color="green">
      <van-tab title="最热" class="tabs">
        <div class="tab">
          <div class="tu">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F99f39d9d-059a-4fd6-82c2-18b61f18069c%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1698393565&t=b2614c41a9561a821d0a0ee896dc2d24" alt="">
                <p class="title"> 没胃口的小伙伴可以试试这么吃</p>
                <p class="time">
                  <img src="https://img1.baidu.com/it/u=2871593365,1320034049&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
                  <span>j**9</span>
                  <van-icon name="good-job-o" @click="hedleClick"/>{{ count}}
               </p>
              </div>
              <div class="tu">
                <img src="https://p4.itc.cn/q_70/images03/20211102/bc96e974f18048a69288301562c45cdd.jpeg" alt="">
                <p class="title"> 糕点选择这款</p>
                <p class="time">
                  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw%2F66675a50-609a-41a8-98c9-1be96f4037d3%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1698393756&t=e7e777efd41a6b599ae28c5a9a5698c3" alt="">
                  <span>9**467</span>
                  <van-icon name="good-job-o" @click="hedleClick"/>{{ count}}
               </p>
              </div>
              <div class="tu">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F4dc59f1d-4da6-4fb5-975e-7782a50857b2%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1698393582&t=99bc7e7eedf0cbb5a15564bf9793a30e" alt="">
                <p class="title"> 想吃零食可以看看这款开胃小食</p>
                <p class="time">
                  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201909%2F23%2F20190923182909_LPaCx.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1698393733&t=4e1d4ef8c0eb1436319bc9010623e3f6" alt="">
                  <span>8**23</span>
                  <van-icon name="good-job-o" @click="hedleClick"/>{{ count}}
               </p>
              </div>
        </div>
        </van-tab>
      <van-tab title="最新" class="tabs">
        <div class="tab">
          <div class="tu">
            <img
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fb271809a-c2a2-4b66-aacb-7114f4cc325d%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1697854966&t=d429b1e23db08be7e93737224001ce0c"
              alt="">
            <p class="title"> 没胃口的小伙伴可以试试这么吃</p>
            <p class="time">
              <img src="https://img1.baidu.com/it/u=2871593365,1320034049&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                alt="">
              <span>j**9</span>
              <van-icon name="good-job-o" />68
            </p>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <div class="fixd" @click="Participate">
      <van-icon name="records-o" color="#fff" /> <span>参与话题</span>
    </div>
  </div>
</template>

<script>
import clubs from "@/api/clubs.js"
export default {
  name:"deta",
  data() {
    return {
      activeNames: ["0"],
      count:0,
      list:[],
      anmuid:"",
      listdata:[]
    };
  },
  mounted(){
    this.listdata=this.$store.state.routerList
    console.log(1);
    setTimeout(()=>{
      this.anmuid=this.$store.state.id
      this.setClbus()
    })
  },

  methods: {
    async setClbus() {
      // hottopicId
      // console.log(this.$store.state.routerList);
      let res = await clubs.getClubscommit( this.anmuid)
      // console.log(this.$route.query.name);
      console.log(res);
      this.list = res.data.list
    },
    onClick(name, title) {

    },
    headerClick() {
      // console.log( this.$router);
      this.$router.push("/clubs/clubs")
    },
    hedleClick() {
      this.count++
      localStorage.getItem("count", JSON.stringify(this.count))
    },
    Participate() {

      this.$router.push("/clubs/Participate")
    }
  },
};
</script>

<style lang="scss" scoped>
.ount {
  width: 100%;
  background: rgba($color: #000000, $alpha: 0.5);
}
.ount[v-cloak] {
    display: none;
  }
.deta {
  height: 700px;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;

  img {
    width: 100%;
    height: 200px;
    position: relative;
    background: #fff;
  }
}


.back {
  z-index: 2;
  width: 40px;
  height: 40px;
  background: rgba($color: #f5f5f5, $alpha: 0.5);
  border-radius: 20px;
  text-align: center;
  line-height: 40px;
  position: fixed;
  top: 20px;
  left: 10px;
}

.top {
  width: 300px;
  height: 150px;
  background: #fff;
  border-radius: 10px;
  position: absolute;
  top: 180px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;

  p {
    margin-top: 10px;
    margin-left: 10px;
  }

  h4 {
    margin-left: 10px;

    .van-icon {
      font-size: 20px;
      margin-top: 20px;
    }
  }
}
.tabs{
  position: sticky;
  height: 600px;
}
.van-tabs{
  position: relative;
}
.browse1{
  margin-top: 10px;
  color: #ccc;
  font-size: 14px;
  margin-left: 10px;
}

.van-collapse {
  z-index: 4;
}


.van-tabs {
  margin-top: 130px;
  overflow: scroll;
  flex: 1;

  .tab {
    display: flex;
    flex-wrap: wrap;
  }
}

.tu {
  margin: 5px 10px;
  width: 160px;
  height: 250px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;

  img {
    width: 180px;
    height: 150px;
  }

  .time {
    margin: 5px;

    img {
      width: 20px;
      height: 20px;
      border-radius: 20px;
    }

    .van-icon {
      margin-left: 90px;
    }
  }
}

.fixd {
  width: 130px;
  height: 40px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 70px;
  text-align: center;
  margin: 0 auto;
  background: rgb(43, 128, 0);
  border-radius: 20px;
  line-height: 40px;

  span {
    color: #fff;
  }

  .van-icon {
    font-size: 20px;
  }
}
</style>